<template>
    <div>
        <div>组件传值</div>
        <div>
            <child ref="compRef" :count="100" str="hello" :people="x" :hobby="hobby" @func="func" @func2="func2"></child>
            <hr>
            <h3>test 父子组件双向绑定</h3>
            <Selects v-model:selectValue="selectValue"></Selects> <!--v-model:name 可以双向绑定多个属性   v3给组件添加点击事件无需加.native修饰符-->
            <el-button @click="btnClick">打印selectValue</el-button>
            <hr>
            <div>
                vmodel在组件身上的使用
            </div>
            <div>
                <!--  <child2 :modelValue="money" @update:modelValue="handler"></child2>-->
                <!--  <child2 v-model:modelValue="money"></child2>-->
                <child2 v-model="money" v-model:filesArray="filesArray"></child2>
            </div>
        </div>
    </div>
</template>

<script  setup lang="ts">
    // import { Nullable } from 'element-plus/es/utils';
    //useAttrs 也能获取非props 属性  和组件身上的点击事件
    import {ref, reactive, onMounted, watch, useAttrs, defineExpose,computed,getCurrentInstance, onUnmounted} from 'vue'
    import child from "./components/child.vue"
    import child2 from "./components/child2.vue"
    import Selects from "./components/Select.vue"
    import $bus from "../../bus";
    // import $bus from "@/bus";

    let hobby =reactive( ["抽烟","喝酒","打牌"] ) // 这个能处理数组, 也能通过下标直接修改数据
    // const x = reactive({a:'a'})
    const x2 = ref(20)
    const x = reactive({
        name:"wf",
        age:20
    })
    let filesArray:any = reactive({
        id:1,
        filesA:[{id:1, money:1}, {id:2, money:12}]
    });
    const compRef = ref<any>(null);
    let selectValue = ref(2);
    let money = ref(100);
    let com = computed(()=>{
        return 100
    })

    console.log("com",com.value)
    onMounted(()=>{
        // getCurrentInstance 获取当前组件的实例
        const appContext = getCurrentInstance();
        console.log("获取当前组件的实例",appContext)
        console.log("获取当前组件的实例",appContext?.proxy)
        // proxy.$attrs
        // proxy.$data
        // proxy.$el
        // proxy.$emit
        // proxy.$forceUpdate
        // proxy.$nextTick
        // proxy.$options
        // proxy.$parent
        // proxy.$props
        // proxy.$refs
        // proxy.$root
        // proxy.$slots
        // proxy.$watch

        /*父组件获取子组件中的 值 和方法*/
        console.log(compRef.value.x2);
        // compRef.value.x2+="123"  不仅可以拿子组件的方法与值 还能直接改子组件的值
        compRef.value.x2*=2
        compRef.value.funca();
        $bus.on("bus",(data)=>{
            console.log("data",data);
        })
    });


    /*父传子 的函数 在子组件中触发 并携带参数*/
    const func = (arg:any)=>{
        console.log(arg)
    }
    const func2 = (arg:any)=>{
        console.log(arg)
    }
    const btnClick = (arg:any)=>{
        console.log("selectValue",selectValue.value)
    }
    const handler = (data:any)=>{
       money.value = data
    }
    watch(money, (newValue, oldValue) => {
        console.log("money新的值:", newValue);
        console.log("money旧的值:", oldValue);
    });

    watch(selectValue, (newValue, oldValue) => {
        console.log("selectValue新的值:", newValue);
        console.log("selectValue旧的值:", oldValue);
    });

    watch(filesArray, (newValue, oldValue) => {
        console.log("filesArray新的值:", newValue);
        console.log("filesArray旧的值:", oldValue);
    });

    onUnmounted(()=>{
        $bus.off("bus") // 卸载
    })
    // console.log("x",x.age)
    /*父组件暴露属性， 子组件使用$parent 获取*/
    defineExpose({
        x
    });
</script>

<style scoped>

</style>